<script setup lang="ts">
import { requireImgUrl } from "@/utils/localurl/metaUrl";

defineProps({
  visible: {
    type: Boolean,
    default: true,
  },
  icon: {
    type: String,
    default: "",
  },
  position: {
    type: Object,
    default: () => ({ top: 0, left: 0 }),
  },
  warning: {
    type: Boolean,
    default: false,
  },
  eqName: {
    type: String,
    default: "",
  },
  direction: {
    type: String,
    default: "",
  },
  status: {
    type: String,
    default: "",
  },
});
const emit = defineEmits<{
  (event: "serversUpdated"): void;
}>();

const handleChange = (e) => {
  emit("togglePopover", e);
};

const switchDirection = (e) => {
  switch (e) {
    case "up":
      return "上";
    case "down":
      return "下";
    case "left":
      return "左";
    case "right":
      return "右";
  }
};

const switchColorByStatus = (e) => {
  switch (e) {
    case "onLine":
      return "rgba(116, 242, 250, 1)";
    case "outLine":
      return "rgba(204, 233, 255, 1)";
  }
};
</script>

<template>
  <div
    v-if="visible"
    class="device-mark"
    :style="{ ...position }"
    @click="handleChange"
  >
    <div :class="warning ? 'pulse' : 'static'" class="mark">
      <div
        class="direction"
        :style="warning ? 'color:red' : `color:${switchColorByStatus(status)}`"
        v-if="direction && direction != ''"
      >
        <!-- {{ switchDirection(direction) }} -->
      </div>
      <img :src="requireImgUrl('image/dashboard', icon)" />
    </div>
    <div class="eqInfo" v-if="eqName">
      <div class="text">
        {{ eqName }}
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.device-mark {
  display: flex;

  cursor: pointer;
  position: absolute;
  z-index: 8;

  img {
    width: clamp(3rem, 2.5vw, 6rem);
    display: inline-block;
  }

  .mark {
    position: relative;

    .direction {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: -40%;
      font-weight: bold;
    }
  }

  .eqInfo {
    width: fit-content;
    height: clamp(2.75rem, 2.29vw, 5.5rem);
    background: rgba(4, 19, 31, 0.4);
    color: #ffffff;
    display: flex;
    align-items: center;
    font-size: clamp(1rem, 0.83vw, 2rem);
    line-height: clamp(1rem, 0.83vw, 2rem);
    padding-left: 10px;
    box-sizing: border-box;

    .text {
      width: 5em;
      overflow: hidden;
      /* 显示省略符号来代表被修剪的文本。 */
      text-overflow: ellipsis;
      /* 文本不换行 */
      white-space: nowrap;
    }
  }

  .pulse {
    position: relative;

    &::before,
    &::after {
      content: "";
      display: inline-block;
      position: absolute;
      width: 200px;
      height: 100px;
      border: 2px solid #ef2d02;
      background: rgba(239, 45, 2, 0.8);
      border-radius: 50%;
      z-index: 2;
      opacity: 0;
      top: 100%;
      left: 50%;
      transform: translate(-50%, -50%);
      transform-origin: center;
      box-shadow: 1px 1px 30px #ef2d02;
      pointer-events: none;
    }

    &::before {
      animation: warn 2s ease-out infinite;
    }

    &::after {
      animation: warnBig 2s ease-out infinite;
    }
  }

  // 报警声波扩散动画
  @keyframes warn {
    0% {
      transform: translate(-50%, -50%) scale(0);
      opacity: 1;
    }

    100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 0;
    }
  }

  @keyframes warnBig {
    0% {
      transform: translate(-50%, -50%) scale(0);
      opacity: 1;
    }

    100% {
      transform: translate(-50%, -50%) scale(0.6);
      opacity: 0;
    }
  }
}
</style>
